<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{ name }}</div>
    <div>{{ num }}</div>
    <button @click="editNum">修改num</button>
    <div>arr: {{arr}}</div>
    <button @click="editArr">修改arr</button>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

enum Color {Red = 1, Green = 2, Blue = 4}// 枚举

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string;
  num = 6;
  num2!: number;
  arr = [1,2,3,4,5];
  name = 'wanghaha';
  list: number[] = [1, 2, 3];
  list2: Array<number> = [1, 2, 3];
  tuple: [number, string, string] = [24, "Indrek" , "Lasn"]; // 元组
  c: Color = Color.Green;


  editNum():void {
    this.num ++
  }
  editArr():void {
    this.arr[0] = this.arr[0] + 1
  }

  getLength(something: string | number): number {
    return something.toString().length;
  }
  gen_func1<T>(arg: T): T {
    return arg;
  }
  array_func<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);
     return arg;
  }
  // 生命周期函数
  created(): void {
    console.log(this.c) // 2
    let colorName: string = Color[2];
    console.log(colorName)

    // 类型断言 简略的定义是：可以用来手动指定一个值的类型。

    // let strLength: number = (<string>someValue).length;
    let strLength: number = this.getLength('123456')
    let numLength: number = this.getLength(123456)
    console.log(strLength, numLength)

    console.log(this.gen_func1('wanghaha-泛型'))
    console.log(this.array_func<number>([1, 2, 3])) // 只能number
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>
